import React, { Component, lazy, Suspense } from 'react';
import { Redirect, Route, Switch } from 'react-router-dom';
// import '../styles/Index.css'
import Loading from '../components/Loading';
import MyTabbar from '../components/MyTabbar';

let Home = lazy(() => import('./Index/Home'))
let Cate = lazy(()=>import('./Index/Cate'))
let Allgood = lazy(() => import('./Index/Allgood'))
let Shopcart = lazy(() => import('./Index/Shopcart'))
let Mine = lazy(() => import('./Index/Mine'))
let NotFound = lazy(() => import('./NotFound'))


class Index extends Component {
    render() {
        return (
            <div className='index'>
                {/* 定义二级路由 */}
                <Suspense fallback={<Loading />}>
                    <Switch>
                        <Route exact path="/index/home" component={Home} />
                        <Route exact path="/index/cate" component={Cate} />
                        <Route exact path="/index/allgood" component={Allgood} />
                        <Route exact path="/index/shopcart" component={Shopcart} />
                        <Route exact path="/index/mine" component={Mine} />
                        <Redirect exact from='/index' to="/index/home" />
                        <Route path="*" component={NotFound} />
                    </Switch>
                </Suspense>

                {/* 底部组件 */}
                <MyTabbar />
            </div>
        );
    }
}

export default Index;